<template>
  <a-modal :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" top="20%" :mask-closable="false">
    <template #title> 添加属性 </template>
    <a-row>
      <a-col :span="9">
        <a-select @change="relatedList" v-model="searchValue.propGroupIdList" multiple allow-clear :max-tag-count="1" placeholder="请选择">
          <template #prefix>属性分组</template>
          <a-option v-for="item of groupOptions" :label="item.name" :value="item.id"></a-option>
        </a-select>
      </a-col>
      <a-col :span="9" :offset="1">
        <a-input-group>
          <a-select :style="{ width: '120px' }" v-model="searchValue.type" placeholder="first">
            <a-option label="属性中文名称" value="nameList"></a-option>
            <a-option label="属性英文名称" value="nameEnList"></a-option>
            <a-option label="编码" value="codeList"></a-option>
          </a-select>
          <a-input-search @search="relatedList" @clear="relatedList" allow-clear v-model="searchValue.typeValue" :style="{ width: '180px' }" placeholder="请输入" />
        </a-input-group>
      </a-col>
      <a-col :span="4" :offset="1">
        <a-button class="gray-outline" size="medium" @click="reset">重置</a-button>
      </a-col>
    </a-row>
    <a-table class="table-singe-line" size="mini" ref="table" @selection-change="selectColumn" row-key="id" :row-selection="rowSelection" :data="data" :pagination="false" :scroll="{ y: 300 }" style="margin-top: 10px">
      <template #columns>
        <a-table-column v-for="item of columns" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex"> </a-table-column>
      </template>
    </a-table>
    <div style="margin-top: 10px; overflow: hidden">
      <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { reactive } from 'vue'
  import { defineComponent, ref } from 'vue'
  import { getRelatedList, getPropertyGroupList } from '@/api/product'
  const columns: any = [
    {
      title: '编码',
      dataIndex: 'code',
      align: 'left',
      width: 150,
    },
    {
      title: '属性中文名称',
      dataIndex: 'name',
      align: 'left',
      width: 150,
    },
    {
      title: '属性英文民称',
      dataIndex: 'nameEn',
      align: 'left',
      width: 150,
    },
    {
      title: '属性分组',
      dataIndex: 'propGroupName',
      align: 'left',
      width: 150,
    },
  ]
  export default defineComponent({
    name: 'selProperty',
    emits: ['save'],
    setup(props, { emit }) {
      let visible = ref(false)
      let searchValue: any = ref({ type: 'nameList', propGroupIdList: [], typeValue: '' })
      let pageNation = reactive({ total: 30, pageSize: 20, pageNum: 1 })
      let selectRow = reactive([])
      let data: any = ref([])
      let groupOptions: any = ref([])
      const table = ref()
      const handleOk = () => {
        let arr: any = []
        selectRow.forEach((e, i) => {
          let obj: any = {}
          let subObj: any = data.value.find((el: any) => el.id == e)
          obj.propRequired = false
          obj.propId = subObj.id
          obj.propName = subObj.name
          obj.propNameEn = subObj.nameEn
          obj.code = subObj.code
          obj.sort = i
          arr.push(obj)
        })
        console.log(arr)

        emit('save', arr)
        selectRow.forEach((e, i) => {
          table.value.select(e, false)
        })
        visible.value = false
      }
      const handleCancel = () => {
        visible.value = false
      }
      const rowSelection: any = reactive({
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      })
      const relatedList = async () => {
        let params: any = {
          pageNum: pageNation.pageNum,
          pageSize: pageNation.pageSize,
          propGroupIdList: searchValue.value.propGroupIdList ? searchValue.value.propGroupIdList.join(',') : [],
        }
        params[searchValue.value.type] = searchValue.value.typeValue
        const res: any = await getRelatedList(params)
        if (res.code == 'SUCCESS') {
          data.value = res.data.records
          pageNation.total = res.data.total
        }
      }

      const groupList = async () => {
        const res = await getPropertyGroupList()
        groupOptions.value = res.data
      }

      const changePage = (val: number) => {
        pageNation.pageNum = val
        relatedList()
      }

      const sizeChange = (val: number) => {
        pageNation.pageNum = 1
        pageNation.pageSize = val
        relatedList()
      }

      const search = () => {
        console.log(searchValue.value)
      }

      const selectColumn = (val: any) => {
        selectRow = val
      }

      const open = () => {
        relatedList()
        groupList()
      }
      const reset = () => {
        searchValue.value = { type: 'nameList', propGroupIdList: '', value: '' }
        relatedList()
      }
      return {
        visible,
        open,
        handleOk,
        handleCancel,
        columns,
        data,
        pageNation,
        rowSelection,
        selectColumn,
        changePage,
        sizeChange,
        selectRow,
        searchValue,
        groupOptions,
        relatedList,
        search,
        reset,
        table,
      }
    },
  })
</script>

<style lang="less" scoped></style>
